cc-pocket · mobile ui 2.0 · entry flow · direction stage

Entry Flow Direction v1

Direction A extended backwards from Sessions to the path that reaches them: pair, choose or recover a computer, choose a project or browse for a directory, then start with defaults or configure Agent, Model and Mode. Same tokens, same hairline hierarchy, no second visual language and no new brand skin. Sessions, Chat and Secure Approval are unchanged and are not restated here.

13 frames
402 × 874 · 1:1
iPhone 17
dark first · light proof
no new tokens
no protocol change
F

Flow map

Five surfaces. One canonical action each, and an exit condition that is a real state, not a screen the user must remember to leave.
01 · entered when no owner binding
Pair a computer
Six-digit code is the spine. Scan, paste link and direct LAN are alternatives that never become the hierarchy.
action · Pair computer
exit · binding stored
route · PairingScreen.kt
02 · entered when not Ready
Choose / recover a computer
Paired computers as rows. The failing phase names itself and owns the recovery action; nothing is merged into a generic error.
action · phase-specific
exit · ConnPhase.Ready
route · ConnectionGate / ConnectScreen
03 · home surface
Projects
Title, machine state, quiet utilities, then work. Current work outranks history. One open-folder entry, no second plus control.
action · New session
exit · session opened or picker
route · DirectoryScreen
04 · bounded sheet
Directory picker
Recents pinned at the home root, then Browse. The full path stays visible, and the decision region is pinned to the bottom.
action · Start here
exit · workdir chosen
route · DirectoryPickerSheet
05 · bounded sheet
Configure session
Workdir, then Agent, then Model, then Mode. One Start that spells out the combination it is about to run.
action · Start · agent · mode
exit · session started once
route · StartSessionModeSheet
The fast path is the default path

New session still starts immediately on persisted defaults. Surface 05 exists only because the user asked for it: the defaults control opens configuration and starts nothing.

Back paths are unchanged

Repository-driven root routing still decides the first surface. Every existing dismiss, system back and breadcrumb return survives; the refactor adds no navigation ownership.

Specialist surfaces stay put

Fleet, Review Center, Settings, Help, folder sharing, guest-share terminal states and Demo keep their current designs. This file changes how they are reached, not what they are.

G

Shared grammar

Five components carry every frame, and six connection phases carry every state sentence.
Entity row
cc-pocket
/Users/alex/code/cc-pocket
›

Name first, then only facts the backend supplies. No container, no fixed height, hairline above. Mark plus wording, never colour alone.

State region
Computer offline
The relay answered. The daemon on this computer is not running.
Retry Exit

One shape, one sentence in plain words, one canonical action and at most one secondary. It sits where content would have been, never as a toast.

Disclosure
Paste pairing link ▾
Direct LAN address ▾

Advanced routes stay reachable at 48pt and stay closed. Opening one is never an action with consequences.

Technical value
On the computer
cc-pocket-daemon pair

Monospace, verbatim, copyable at 48pt of hit area. Long paths wrap on characters rather than truncating away the end.

Decision region
~/code/cc-pocket
Start here Options

Pinned to the bottom of every sheet. The filled control is the only thing on the screen that starts work; Options only opens configuration.

Connecting
First attempt. Projects-shaped skeleton until directories arrive.
no action · wait
Reconnecting
Was ready, dropped. Previous content stays under a slim warning.
no action · content kept
Relay unreachable
The relay itself was never reached. Says so, and blames neither daemon nor credential.
Retry · Exit
Computer offline
Relay reachable, daemon not running. Existing hint kept. In Chat, history stays under a slim banner.
Retry · Exit
Pairing invalid
The credential was rejected. Retry is not offered, because retrying cannot help.
Pair again · Remove
Ready
Relay attached, daemon online, directories received. Never shown ahead of the directory list.
Projects renders
A

Pair and reach a computer

Camera-free by construction. The scanner is a room the user enters on purpose.
01 · Pair a computer · dark
9:41

Pair a computer

Run the pairing command on the computer you want to control. It prints a six-digit code.

4 2 7 9 0 3
Pair computer
The code stays valid only while the computer is still showing it.
Scan QR code ›
Paste pairing link ▾
Direct LAN address ▾
On the computer
cc-pocket-daemon pair
Explore the demo instead
Rules
No camera is opened, previewed or requested on this screen. Nothing here depends on what the phone can see.

The code field is the only filled-in element above the fold; scan, paste and LAN are peers below a hairline, in that order of expected use.

Demo sits at the bottom in secondary text. It is reachable and it never competes with pairing.

When this screen is opened from an existing binding, the title row gains a back chevron and Cancel — specimen in section D.
02 · Scan QR · camera denied · dark
9:41
‹ Scan QR code
Camera unavailable
cc-pocket does not have permission to use the camera on this device.
Open Settings
Pair without the camera

Scanning is one way in, not the way in. Both alternatives complete pairing on their own.

Enter six-digit code
Paste pairing link ▾
On the computer
cc-pocket-daemon pair
Rules
Unavailable and denied share this layout; only the sentence changes. Neither is an error screen — the viewfinder simply states why it is empty.

Back returns to 01 with the entered digits intact. The scanner never becomes a dead end.

The same code and paste routes are repeated here rather than linked away, so the user never has to reconstruct where they came from.
03 · Connecting · Projects skeleton · dark
9:41

Projects

Panda · MacBook Pro · connecting ›
Review Help Settings
Waiting for the directory list. Nothing is claimed as ready until it arrives.
New session
Rules
Header geometry is identical to frame 05 — title, machine row, utility row, search row, dock — so arriving directories replace bars in place with no jump.

The skeleton has the shape of the real list, not a spinner. It stops at four rows because the real count is unknown.

The dock stays present and inert. Removing it would move every row when Ready lands.
04 · Computers · offline recovery · dark
9:41

Computers

Computer offline
Panda · MacBook Pro
The relay answered, but the daemon is not running. Start cc-pocket on that computer, or wake it and try again.
Retry Exit
Paired computers
Panda · MacBook Pro
acct 9f3a…c21 · owner
Active binding
⋯
studio-mini.local
acct 9f3a…c21 · owner
⋯
4c8e…a17
acct 4c8e…a17 · guest
⋯
Tap a computer to connect to it. Rename and remove live under the row menu.
+ Add computer ›
Direct LAN address ▾
Rules
Rows carry only what PairedDaemon supplies: display name by the label → hostName → truncated accountId fallback, an account caption, role, and which binding is active. No latency, no last seen, no OS.

The failing phase gets the one raised surface on the screen; the list below stays flat, so switching computers reads as a normal choice rather than a second alarm.

Only the active binding states that it is active. The other rows state nothing they cannot prove.
B

Projects and the directory picker

Current work outranks history. One open-folder entry, one dock, no second equal-weight plus.
05 · Projects · ready · dark
9:41

Projects

Panda · MacBook Pro · online ›
Review 2 Help Settings
Filter projects TreeFlat
Open any folder… ›
Active
cc-pocketRunning
Add demo mode for App Review
main · 1 session
/Users/alex/code/cc-pocket
Pinned
cc-pocket-site
/Users/alex/code/cc-pocket-site · 2h ago
Projects
relay-server
/Users/alex/code/relay-server · yesterday
notes-cli
/Users/alex/Library/Mobile Documents/com~apple~CloudDocs/notes-cli · Mar 4
dotfiles
/Users/alex/dotfiles · Feb 19
New session cc-pocket · Claude · Default
▾
Rules
Hierarchy runs title → machine state → utilities → search → work. Utilities are 48pt tall but hold the muted weight, so they never read as the next step.

Active is the only row with a filled dot, a written Running, a live session title and a branch. Branch is printed for the active row alone, because that is the only row that has one.

Open any folder… is the single doorway to the picker. The dock is New session plus a quiet defaults chevron — the chevron opens configuration and starts nothing.

Long paths wrap on characters instead of ellipsing, so the end of the path — the part that identifies it — survives.
06 · Projects · no matches · light
9:41

Projects

Panda · MacBook Pro · online ›
Review 2 Help Settings
kubern TreeFlat
Open any folder… ›
No projects match “kubern”

The filter searches the names and paths this computer reported. Nothing here matched.

Clear filter Open any folder…
Pinned and active work is hidden while a filter is applied, and returns when it is cleared.
New session cc-pocket · Claude · Default
▾
Rules
The light proof keeps the same geometry and the same state priority; only the token pair changes. Ring, diamond and filled dot carry state in both themes.

An empty result is not an illustration. It names the query, says what was searched, and offers the two things that can actually help.

The machine row and the dock stay visible while filtering, so the user is never stranded in a result set with no context and no way out.
07 · Directory picker · home · dark
9:41
Projects
Choose a directory
on Panda · MacBook Pro
~ /
~
Recents
cc-pocket
/Users/alex/code/cc-pocket
cc-pocket-site
/Users/alex/code/cc-pocket-site
Browse
/ code ›
/ Documents ›
/ Downloads ›
Enter a path manually ▾
Selected directory
/Users/alex
Start hereClaude · Default Options
Rules
The header says whose filesystem this is. A directory list without a computer name is the fastest way to start work in the wrong place.

Recents are pinned at the home root only, and disappear once the user drills, because they are not children of the current folder.

Start here names the defaults it will use. Options opens configuration with this directory already chosen, and starts nothing.

Dismissing the sheet — scrim, swipe or system back — selects nothing and starts nothing.
08 · Directory picker · drilled · long path
9:41
Projects
Choose a directory
on Panda · MacBook Pro
‹ ~ / Library / Mobile Documents / com~apple~CloudDocs
/ Documents ›
/ notes-cli ›
/ scratch-and-archive-2024 ›
Directories only. Files are never listed, because a session cannot open one.
Enter a path manually ▾
Selected directory
/Users/alex/Library/Mobile Documents/com~apple~CloudDocs
Start hereClaude · Default Options
Rules
The breadcrumb wraps rather than scrolls sideways, and the last crumb is the only one in primary ink. Up is a real 48pt control, not the breadcrumb itself.

The selected path is shown in full and stays copyable. Character wrapping is deliberate: com~apple~CloudDocs must not be ellipsed away.

Loading, empty and unreadable folders replace the list only — the header and the decision region never move. Specimens in section D.
C

Configure a session

Workdir, Agent, Model, Mode — in that order, and only one control starts anything.
09 · Configure · Claude · dark
9:41
Projects
New session
cc-pocket
/Users/alex/code/cc-pocket
Agent
Claude Codex OpenCode Kimi
Model
Follow the computer's default
this computer reported no model list
▾
Mode
✓
Default
Asks before anything that changes files or runs a command.
Accept edits
Edits files without asking. Still asks before running commands.
Plan
Reads and proposes. Changes nothing until you leave Plan.
Full access
Never asks. Confirmation required before it starts.
Auto appears here only when this computer reports that it supports it.
Start sessioncc-pocket · Claude · Default
Rules
Agent is four chips, not four cards: a name is all the agent needs at this width, and the explanation belongs to the mode rows.

Mode rows are selection, and they read as selection — a check mark, no chevron, no button ink. The one filled control is Start, and it prints the exact combination it will run.

Model states its fallback in words. When the computer reports no list, the row says so rather than showing an invented model name.
10 · Configure · Codex · dark
9:41
Projects
New session
cc-pocket
/Users/alex/code/cc-pocket
Agent
Claude Codex OpenCode
Kimi is hidden because this computer did not report support for it.
Model · reported by this computer
✓ ⟨model id 1⟩
Follow the computer's default
Mode
Cautious
Asks first and cannot write outside the workdir.
✓
Balanced
Works inside the workdir and asks before anything beyond it.
Autonomous
Runs without asking, still confined to the workdir.
Full access
No sandbox and no approvals. Confirmation required.
approval × sandbox pairs come from CODEX_PRESETS
Start sessioncc-pocket · Codex · Balanced
Rules
Model ids are drawn verbatim from what the computer reported; none are written into the design. The angle-bracket slots mark where those strings land.

Switching agent resets Model and Mode to that agent's own defaults, and Start reprints the new combination before it can be tapped.

Codex mode names are the product's four presets. Their approval and sandbox axes stay in code — this screen explains behaviour, not configuration syntax.
11 · Configure · OpenCode · dark
9:41
Projects
New session
cc-pocket
/Users/alex/code/cc-pocket
Agent
Claude Codex OpenCode Kimi
Model · reported by this computer
⟨model id 1⟩ ▾
Permission
Runs fully automatically

OpenCode does not support approvals. It will read, write and run commands in this directory without pausing, and cc-pocket cannot interrupt it for permission.

There is no mode to choose here. Choose a different agent if you want to be asked.

Approval requests, the queue and the secure approval sheet play no part in an OpenCode session.
Start sessioncc-pocket · OpenCode · automatic
Rules
The Mode section is replaced by a statement, not filled with disabled rows. A greyed-out ladder would imply the ladder exists.

The mark is attention, not danger: this is honest behaviour of the backend, not a hazardous choice the user is making.

Start still prints the combination, and the word it prints is automatic — the same word the section uses.
12 · Full access confirmation · dark
9:41
New session
cc-pocket
/Users/alex/code/cc-pocket
Start with full access?

Claude will read, write and run commands without asking for approval, for the whole session.

Working directory
/Users/alex/code/cc-pocket
Reach

Anything reachable from that directory on Panda · MacBook Pro, including files outside it that a command can touch.

You will not be asked again during this session. Change it by starting a new session in another mode.

Cancel Start full access
Rules
This is the existing confirmation, restyled — not a new gate. It names the agent, the workdir and the computer, because blast radius is a place, not an adjective.

Cancel returns to configuration with Full access still selected and nothing started. Dismissing the confirmation is Cancel.

Danger ink appears here and on the Full access mark only. It is never used for Codex Autonomous or for OpenCode.
D

Stress and conditional regions

200% type in the light palette, and the regions that appear only when a real condition is true.
13 · Configure · 200% type · light
9:41
New session
cc-pocket
/Users/alex/code/cc-pocket
Agent
Claude Codex OpenCode
Mode
✓
Default
Asks before anything that changes files or runs a command.
Accept edits
Edits files without asking. Still asks before
Start sessioncc-pocket · Claude · Default
Rules
Context and Start are pinned; only the middle scrolls. At 200% the user can still see which directory they are in and still reach the button that starts it.

Agent chips wrap to a second line rather than shrinking their labels. Truncating an agent name is not an option.

The Start caption wraps on characters and the control grows to fit. No text on this screen is clipped to keep a fixed height.
Conditional regions · shown only when the condition is real
Relay unreachable
cc-pocket could not reach the relay. This says nothing about the computer itself.
Retry Exit
ConnPhase.RelayUnreachable · outside Chat
Pairing invalid
This computer rejected the stored credential. Retrying will not fix it.
Pair again Remove
ConnPhase.PairingInvalid · no Retry offered
Reconnecting — showing the last known list
Computer offline — history stays readable
Slim banners · inside Chat, content is never replaced
Shared with you
You have collaborator links but no computer of your own yet. Pair one to start your own sessions.
Collaborator links exist · no owner binding · banner only, never a block
‹ Add a computer Cancel
Pairing from an existing binding keeps a real way back. The current computer stays connected.
Frame 01 header · entered from Computers
Can't read this folder
/Users/alex/Library/Application Support
Retry
No subfolders here.
Picker list region only · header and decision region hold still
Deliberately absent
A live camera preview anywhere in the pairing hierarchy
Per-device latency, last seen, OS or battery on computer rows
Repository health, test results or file counts on project rows
A branch on any row that is not the active one
Invented model names — ids render verbatim or the row says default
A permission ladder for OpenCode
A second plus control, a card stack or a bottom navigation bar
Any new protocol field, enum value or daemon command
E

Field sources

Every value drawn in these frames, and the field it must come from.
Element
Source
Rule
Computer name
PairedDaemon.label → hostName → accountId
First non-empty wins. A truncated accountId is a legitimate name and is set in monospace.
Account caption · role
PairedDaemon.accountId · owner|guest
Caption only. Never an online indicator, and never expanded into an identity claim.
Active binding line
active binding identity
Printed on the active row alone. Absence of the line is not a state.
Direct LAN address
PairedDaemon.directUrl · optional
Advanced disclosure. Its presence never implies the computer is online.
Connection sentence
ConnPhase
Six phases, six sentences, six action sets. Never collapsed into a generic failure, never Ready before directories arrive.
Project name · path
DirectoryEntry.name · path
Name in system font, path in monospace, wrapping on characters and copyable.
Running · session title
open · executing · busy · activeSessions
Filled dot plus the word Running plus the live title. Zero sessions prints nothing rather than a zero.
Branch
DirectoryEntry.gitBranch · optional
Only where the backend supplies one, which in practice is the active row. Never inferred for history.
Time on a row
DirectoryEntry.lastModified
The authoritative modification time, not a session time and not a guess at recency.
Recents in the picker
DirectoryEntry.recent
Pinned at the home root only. Never merged into the browse list of another folder.
Agent chips
Claude · Codex · OpenCode · Kimi
Exactly these four. Capability hides unsupported agents; hiding is stated in words, not by disabling.
Model row
daemon / repository model list
Ids render verbatim. When the list is missing the row reads as following the configured default — no model name is invented here.
Mode rows
per-agent mode set · CODEX_PRESETS
Claude four plus optional Auto, Codex four presets, Kimi three, OpenCode none. Plain-language behaviour is the label; the approval and sandbox axes stay in code.
Start caption
workdir · agent · mode
Composed at render time from the current selection, so it cannot drift from what will actually run.
H

Interaction checklist

01Unpaired launch → six digits → Connecting, with the camera never requested.
02Scan QR opened explicitly, camera denied, back to the same code and paste routes with digits intact.
03Paired but disconnected → choose another computer → Projects-shaped skeleton → Ready, with no header shift.
04Relay unreachable → Retry; Computer offline → Retry or Exit; Pairing invalid → Pair again or Remove.
05Projects: filter, tree/flat, drill and breadcrumb back, fleet doorway, and exactly one open-folder entry.
06Picker: use a recent, drill a child, switch root, enter a manual path, open Options — no session started.
07Switch agent → Model and Mode reset to that agent's real options → start exactly once.
08Full access → confirmation naming workdir and reach → Cancel leaves the session unopened.
09Camera-free pairing, Projects and configuration all pass at 200% type and in the light palette.
I

Status of this file

Direction stage, not production

These are wireframe-fidelity frames in the locked Direction A skin. Geometry, hierarchy and wording are the deliverable; no production HTML or CSS is copied from the design export.

Fixtures are the brief's own

Paths, project names, the live session title, the branch and the pairing command are the supplied fixtures. Digits, account fragments and the 9:41 clock are placeholders and carry no meaning.

Localisation

The brief supplies no localised strings, so every label here is its English product label verbatim. Translated copy drops in from the product's own resource file — nothing is translated in this file, and rows are already free of fixed heights so longer strings can grow.

Unchanged surfaces

Sessions, Chat and Secure Approval keep their contracts in A Master Core v1, A Master Proofs v1 and Approval Protocol Handoff v1. Fleet, Review Center, Settings, Help, folder sharing, guest-share terminal states and Demo are reached from here but not redesigned.

Open for implementation

Three things must be read from code rather than from this file: the exact CODEX_PRESETS axis pairs, the capability flags that hide an agent or reveal Claude's Auto mode, and the real model ids. Each has a marked slot in the frames.